<template>
    <div class="notice border-bottom-1px border-top-1px">
    <my-svg class="notice-icon"  :name="`icon-notice`"></my-svg>
    <div class="text">
        <span class="scroll" v-for="(text,index) in texts" :key="index">{{text}}</span>
    </div>
    <div class="change">
        <span @click="getTop">换一批</span>
        <my-svg  name="icon-segi-icon-Change"></my-svg>
    </div>
    </div>
</template>

<script>
    import MySvg from '../../base/svg'
    export default {
        name: "index",
        components:{
            MySvg
        },
        methods:{
            getTop(){
                this.$emit('getTop')
            }
        },
        mounted(){

        },
        data(){
            return {
                scroll:true,
                texts:[
                    '放款率高达99%,机构放款前不会向用户收取任何一分钱费用'
                ]
            }
        }
    }
</script>

<style type="text/stylus" lang="stylus">
    @keyframes text-scroll{
        0%{
            transform translateX(0%)
        }
        100%{
            transform translateX(-100%)
        }

    }
    .notice
        margin-top 10px
        padding 10px 10px
        display flex
        align-items center
        background-color  white
        /*justify-content space-around*/
        .notice-icon
            color #FEAB14
            font-size 14px
            padding-left 10px
            padding-right 5px

            z-index 100
        .text
            font-weight 400
            padding-left 10px
            text-align center
            flex 1
            white-space nowrap
            overflow hidden
            color black
            font-size 12px
            color  #262626
            .scroll
                display inline-block
                animation text-scroll linear 15s infinite normal
        .change
            z-index 100
            opacity 1
            padding 0 10px
            color #6FA1C9
            font-size 12px
            span
                margin-right 5px



</style>
